// console.log(location.search);
const id = location.search.split('?id=')[1]
// console.log(id);

const E = window.wangEditor
const editor = new E("#contentBox")
// 或者 const editor = new E(document.getElementById('div1'))
editor.config.zIndex = 1;
editor.create()

// 1. 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 2. 裁剪选项
let options = {
    aspectRatio: 400 / 280,
    preview: '.preview'
}



let form = layui.form
axios({
    method: 'get',
    url: '/my/article/cates',
}).then(({ data: { data } }) => {
    let newArr = data.map(({ Id, name }) => ` 
    <option value="${Id}">${name}</option>`)
    $('[name=cate_id]').append(newArr.join(''))
    form.render()

    axios.get('/my/article/' + id).then(({ data: { data } }) => {
        form.val('form', data)
        // console.log(data);
        editor.txt.html(data.content)

        // 3. 初始化裁剪区域
        $image.attr('src','http://api-breakingnews-web.itheima.net' + data.cover_img).cropper(options)

    })
})

$('#btnChooseCoverImage').on('click',function(){
    $('#fileCover').click()
})
$('#fileCover').change(function(){
    let file =this.files[0]
    if(!file){
        return layer.msg('请选择图片')
    }

    let url = URL.createObjectURL(file)

    $image.cropper('destroy').attr('src',url).cropper(options)
})

let state
$('#btnPublish').click(function(){
    state = '已发布'
})
$('#btnSave').click(function(){
    state = '草稿'
})


$('form').on('submit',function(e){
    e.preventDefault()
    // 收集表单数据 ==》 接口要求的是formdata格式
    let fd = new FormData(this)
    //收集富文本编辑器的内容
    // console.log(editor.txt.html());
    fd.append('content',editor.txt.html())

    fd.append('state',state)
    // fd.forEach((value,name) => {
    //     console.log(value,name);
    // })
    fd.append('Id',id)
    $image
    .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 400,
        height: 280
    })
    .toBlob(function(blob) {       
    	// 将 Canvas 画布上的内容，转化为文件对象
        // 得到blob文件对象后，进行后续的操作 ==> 通过 FormData来收集数据， ajax提交数据
        fd.append('cover_img',blob)

        // fd.forEach((value,name) => {
        //     console.log(value,name);
        // })

        axios.post('/my/article/edit',fd).then(({data:{status,message}}) => {
            // console.log(status,message);
            if(status !== 0) return layer.msg(message)
            layer.msg('更新成功',
                {
                    time:1500
                },
                function(){
                    location.href = '/article/art_list.html'
                }
            )
        })
    })

   
})